<template>
  <div>
    <!-- 头部登录 -->
    <div class="user-header">
      <div class="header-img">
        <img src="../assets/tx1.jpg" alt width="100px" />
      </div>
      <div class="header-content">
        <p @click="toLogin">立即登录</p>
        <p>
          <small>积分：0</small>
        </p>
      </div>
    </div>
    <!-- 滚动提示 -->
    <div class="notice-bar">
      <van-notice-bar scrollable left-icon="volume-o" background="#fff" text="新上线更稳定的付费快递查询接口" />
    </div>
    <!-- 我的订单 -->
    <div class="order">
      <div class="order-left">
        <van-icon name="notes-o" size="0.4rem" color="#F7B94B" />
      </div>
      <div class="order-center">
        <p>我的订单</p>
      </div>
      <div class="order-right">
        <van-icon name="arrow" size="0.4rem" />
      </div>
    </div>
    <div>
      <!-- 订单 -->
      <van-grid>
        <OrderOne text="待付款" name="paid" size="0.6rem" color="#6D6D6D"></OrderOne>
        <OrderOne text="代发货" name="send-gift-o" size="0.6rem" color="#6D6D6D"></OrderOne>
        <OrderOne text="待付款" name="logistics" size="0.6rem" color="#6D6D6D"></OrderOne>
        <OrderOne text="待付款" name="comment-o" size="0.6rem" color="#6D6D6D"></OrderOne>
      </van-grid>

      <!-- 个人 -->
      <van-grid :column-num="3">
        <OrderTwo text="我的余额" name="gold-coin-o" size="0.5rem" color="#F86650"></OrderTwo>
        <OrderTwo text="我的砍价" name="edit" size="0.5rem" color="#F86650"></OrderTwo>
        <OrderTwo text="我的礼券" name="coupon-o" size="0.5rem" color="#EDB449"></OrderTwo>
        <OrderTwo text="我的收藏" name="star-o" size="0.5rem" color="#EDB449"></OrderTwo>
        <OrderTwo text="我的地址" name="location-o" size="0.5rem" color="#5A9FEC"></OrderTwo>
        <OrderTwo text="联系客服" name="service-o" size="0.5rem" color="#5A9FEC"></OrderTwo>
      </van-grid>
    </div>
  </div>
</template>

<script>
import OrderOne from "../components/common/OrderOne";
import OrderTwo from "../components/common/OrderTwo";
export default {
  components: {
    OrderOne,
    OrderTwo
  },
  methods:{
      toLogin(){
          this.$router.push({
            path:"/login"      
        })
      }
  }
};
</script>

<style scoped>
.user-header {
  width: 100%;
  height: 3.1rem;
  background-color: #c1b18f;
  display: flex;
  justify-content: center;
}
.header-img {
  flex: 1;
  height: 100%;
}
.header-img img {
  border-radius: 50%;
  margin: 0.7rem 0.4rem;
  width: 1.6rem;
}
.header-content {
  flex: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}
.header-content p {
  width: 100%;
  color: white;
}
.header-content p:nth-child(1) {
  font-size: 0.4rem;
  margin-bottom: 0.2rem;
}
.header-content p:nth-child(2) {
  width: 40%;
  height: 0.5rem;
  line-height: 0.5rem;
  background-color: #b6a370;
  border-radius: 0.15rem;
}
.header-content p:nth-child(2) small {
  margin-left: 0.2rem;
}
.notice-bar {
  margin: 0.1rem;
}
.order {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.order-left {
  width: 10%;
  margin-left: 0.3rem;
}
.order-center {
  width: 80%;
}
.order-center p {
  width: 100%;
  text-align: left;
}
.order-right {
  width: 10%;
}
</style>